.CenterBox {
    height: 27%;
    margin: 1% 0%;
    border-radius: 20px;
    display: flex;
}

.CenterLeft {
    width: 20%;
    height: 100%;
}

.KaiShi {
    width: 100%;
    height: 160px;
    background: #678eff;
    margin: 10px 0px 0px;
    overflow: hidden;
    border-radius: 10px;
}

.KaiShi p {
    text-align: center;
    color: #fff;
}

.imgs {
    width: 90%;
    height: 100px;
    background: #fff;
    margin: auto;
    border-radius: 10px;
}

.KaiShi span {
    display: inline-block;
    margin: 10px 8px;
}

.KaiShi img {
    width: 50px;
    height: 80px;

}



.CenterCenter {
    width: 39%;
    height: 100%;
    margin: 0 0.5%;
    z-index: 202;
}

.CenterBottom {
    width: 39%;
    height: 100%;
    margin: 0 0.5%;
    z-index: 202;
}

.xiao {
    width: 100%;
    height: 170px;
    background: #f5f7fd;
    overflow: hidden;
    border-radius: 10px;
}

.xiao p {
    width: 140px;
    height: 50px;
    line-height: 50px;
    background: #fff;
    margin: 3% 4%;
    text-align: center;
    border-radius: 10px;
    display: inline-block;
}

.xiao p:hover {
    background: linear-gradient(to top left, rgba(187, 0, 255, 0.187), transparent);
    background: linear-gradient(to bottom right, rgba(34, 0, 255, 0.16), transparent);
}

.CenterCenter:hover .xiao {
    height: 350px;
    box-shadow: 10px 10px 10px 10px #ccc;
}

.CenterBottom:hover .xiao {
    height: 430px;
    box-shadow: 10px 10px 10px 10px #ccc;
}